<div id="app">
    <header>
        <div class="title">
            <div>
                <ui-icon value="widget" style="font-size: 32px;"></ui-icon>
                <h2>Many Widgets</h2>
            </div>
           
            <div>
                <strong><a style="text-decoration: none; color: #f90;" href="https://github.com/la-vie-est-belle/many-widgets" target="_blank"><ui-label value="i18n:many-widgets.githubStar"></ui-label></a></strong>
            </div>
        </div>

        <div id="version">
            <ui-label>v{{ currentVersion }}</ui-label>
        </div>

        <div id="author">
            <ui-label value="i18n:many-widgets.author"></ui-label>
        </div>

        <!-- <div id="settings-btn" @click="showSettings">
            <ui-icon value="setting"></ui-icon>
        </div> -->
    </header>
    
    <div id="content">
        <ui-section v-for="category in allWidgets" :key="category.categoryId" class="config" :header="category.categoryName" :expand="category.categoryId==0">
            <div v-for="widget in category.widgets" :key="widget.widgetId" class="widget-style">
                <!-- top area is for title and button -->
                <div class="top-area">
                    <span class="top-area-title">
                        <ui-label>{{ widget.widgetName }}</ui-label>
                    </span>

                    <span class="top-area-btn">
                        <ui-button @click="createWidget(widget.widgetName)"><ui-label value="i18n:many-widgets.use"></ui-label></ui-button>
                    </span>
                </div>

                <!-- middle area is for brief intro -->
                <div class="middle-area">
                    <ui-label>
                        {{ widget.intro }}
                    </ui-label>
                </div>

                <!-- middle area is for demo, usage and suggestions -->
                <div class="bottom-area">
                    <ui-section class="config" header="i18n:many-widgets.demoHeader">
                        <div style="text-align: center;">
                            <div>
                                <ui-label style="text-align: justify;" value="i18n:many-widgets.demoIntro"></ui-label>
                            </div>
    
                            <div>
                                <strong v-if="widget.videoLink"><ui-link :value="widget.videoLink"><ui-label value="i18n:many-widgets.videoDemo"></ui-label></ui-link></strong>
                                &nbsp;
                                <strong><ui-link :value="widget.exampleLink"><ui-label value="i18n:many-widgets.projectDemo"></ui-link></strong>
                            </div>
    
                            <div>
                                <ui-qrcode :value="widget.exampleLink"></ui-qrcode>
                            </div>
                        </div>
                    </ui-section>

                    <ui-section class="config" header="i18n:many-widgets.howToUse" v-if="widget.usage">
                        <div v-html="widget.usage"></div>
                    </ui-section>
                    <br />
                </div>
            </div>
        </ui-section>
    </div>
</div>
